fix(component): fix animation error in post-collapsible rendered inside inactive tabs
#5502
Conversation
🦋 Changeset detectedLatest commit: 6016a48 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Related Previews |
alionazherdetska
changed the title
post-collapsible rendered inside inactive tabs
|
There was a problem hiding this comment.
The expand and collapse animations are set with the fill: 'forwards' option, which ensures that the final keyframe of the animation remains applied to the element once the animation completes. However, using fill modes to persist an animation's effect is generally not recommended for several reasons (see the Web Animation API documentation).
Therefore, whenever the expand orcollapse animation are triggered, the styles must be explicitly committed using animation.commitStyles();.
Currently, if the element is not visible, the collapse animation will still run, but the animation effects are not properly committed.
📄 Description
This PR adds visibility check before committing animation styles in PostCollapsible.toggle() to prevent InvalidStateError when the target element is hidden. This resolves errors occurring when animating elements inside hidden tab panels.
📝 Checklist